<template>
    <ul class="goods-sales">
      <li>
        <p>销量人气</p>
        <p>{{ goods.sales_num }}+</p>
        <p><i class="iconfont icon-xiaoliang"></i>销量人气</p>
      </li>
      <li>
        <p>商品评价</p>
        <p>{{goods.comment_num}}+</p>
        <p><i class="iconfont icon-pingjia"></i>查看评价</p>
      </li>
      <li>
        <p>收藏人气</p>
        <p>{{goods.collect_num}}+</p>
        <p @click="handlerCollectGoods(goods.id)"><i class="iconfont" :class="goodsCollectId > 0 ? 'icon-shoucang' : 'icon-shoucang1'"></i>收藏商品</p>
      </li>
      <li v-if="goods.brand_name">
        <p>品牌信息</p>
        <p>{{ goods.brand_name }}</p>
        <p><i class="iconfont icon-pinpai"></i>品牌主页</p>
      </li>
    </ul>
  </template>
  
<script setup>
import { reqAddUserGoodsCollectAPI, reqCancelUserGoodsCollectAPI, reqUserGoodsCollectListAPI } from '@/apis/goodsCollect'
import {useUserStore} from "@/stores/modules/user"
import { ref, onMounted } from 'vue'
import { ElNotification } from 'element-plus';

// 结束父组件传递的数据
const props = defineProps({
  goods: {
    type: Object,
    default: () => {}
  }
})


const userStore = useUserStore()

// 页面挂载完毕
onMounted(() => {
  getUserCollectGoods()
})


const goodsCollectId = ref(0)

// 处理收藏商品
const handlerCollectGoods = async (goods_id) => {
  if (goodsCollectId.value <= 0) {
    const result = await reqAddUserGoodsCollectAPI(goods_id)
    if (result.code == 200) {
      ElNotification({
        type: 'success',
        message: result.message
      });
      goodsCollectId.value = parseInt(result.data.id)
      props.goods.collect_num = props.goods.collect_num + 1
    }
  } else {
    const result = await reqCancelUserGoodsCollectAPI(goodsCollectId.value)
    if (result.code == 200) {
      goodsCollectId.value = 0
      props.goods.collect_num = props.goods.collect_num - 1
      ElNotification({
        type: 'success',
        message: result.data
      });
    }
  }
}

// 获取用户收藏商品
const getUserCollectGoods = async () => {
  if (userStore.profile) {
    const result = await reqUserGoodsCollectListAPI({goods_id:props.goods.id, page: 1, page_size: -1})
    if (result.code == 200) {
      goodsCollectId.value = result.data.total > 0 ? result.data.user_goods_collects[0].id : 0
    }
  }
}
</script>

<style scoped lang='scss'>
  .goods-sales {
    display: flex;
    width: 400px;
    align-items: center;
    text-align: center;
    height: 140px;
    li {
      flex: 1;
      position: relative;
      ~ li::after {
        position: absolute;
        top: 10px;
        left: 0;
        height: 60px;
        border-left: 1px solid #e4e4e4;
        content: "";
      }
      p {
        &:first-child {
          color: #999;
        }
        &:nth-child(2) {
          color: $price-color;
          margin-top: 10px;
        }
        &:last-child {
          color: #666;
          margin-top: 10px;
          i {
            color: $main-color;
            font-size: 20px;
            margin-right: 5px;
          }
          &:hover {
            color: $main-color;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>